<template>
	<view>
		<!-- 顶部返回按钮 -->
		<view style="height: 110rpx;"></view>
		<view class="header">
			<image src="@/static/images/xiangzuo.png" @click="backPage" mode="widthFix" class="left" />
			<view class="header-text">粉丝</view>
		</view>
		<view class="center" v-for="(item,index) in lists" :key="index">
			<image class="avatar" :src="[!!item.avatar?item.avatar:'/static/images/touxiang.png']" mode="aspectFill"></image>
			<view class="center-text">{{item.realname}}</view>
			<view class="btn" v-if="item.is_attention == 1">已关注</view>
			<view class="btn" v-else @tap="goAttention(index)">回关</view>
		</view>
		
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		data() {
			return {
				page: 1,
				lists: [],
				totalNum: 0,
				loadingType: 'more'
			}
		},
		components: {
			uniLoadMore
		},
		//下拉到底获取新的数据
		onReachBottom() {
			this.getLists()
		},
		onLoad() {
			this.getLists()
		},
		methods: {
			backPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			async getLists() {
				if (this.loadingType == 'noMore') {
					return false;
				}
				let res = await this.$myRequest({
					url: '/my_attentions',
					methods: "POST",
					data: {
						cate: uni.getStorageSync('cate'),
						page: this.page,
						token: uni.getStorageSync('token')
					},

				})
				if (res.data.status == 1) {
					this.totalNum = res.data.data.totalNum;
					let ndata = res.data.data.list;

					if (ndata.length > 0) {
						this.lists = [...this.lists, ...ndata];
						if (this.lists.length < this.totalNum) {
							this.page = this.page + 1;
						} else {
							this.loadingType = 'noMore';
						}
					}
				}
			},

			// 关注
			async goAttention(index) {
				let item = this.lists[index]
				let res = await this.$myRequest({
					url: '/add_attention',
					methods: 'POST',
					data: {
						token: uni.getStorageSync('token'),
						cate: uni.getStorageSync('cate'),
						tuid: item.fuid,
						tcate: item.fcate
					}
				})
				if (res.data.status == 1) {
					this.lists[index].is_attention = item.is_attention === 1 ? 0 : 1;
				}
			},
		}
	}
</script>

<style lang="scss">
	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
		margin-right: 20rpx;
	}

	.left {
		width: 17rpx;
		height: 30rpx;
		margin: 7rpx 0 0 32rpx;

	}

	.header {
		display: flex;
		width: 100%;
		height: 60rpx;
		justify-content: space-between;
		border-bottom: 1rpx solid #f5f5f5;

		.header-text {
			letter-spacing: 2rpx;
			margin: 0 auto;
		}
	}

	.center {
		display: flex;
		margin-top: 40rpx;
		align-items: center;
		padding-left: 32upx;

		.center-text {
			flex: 1;
			font-size: 28upx;
		}

		.btn {
			background-color: #f04528;
			color: white;
			border-radius: 10rpx;
			width: 130rpx;
			font-size: 28rpx;
			text-align: center;
			padding: 10rpx;
			margin-right: 30rpx;
		}
	}
</style>
